<template>
  <section class="section section--resources section--faq">
    <div class="container">
      <h2 class="section__title">城市智慧停车管理系统</h2>
      <p class="section__desc">通过智能化手段提升城市停车效率，减少交通压力，提供便捷的停车体验。</p>
     
      <div class="section__content">
        <el-row :gutter="20" class="feature-row">
          <el-col :span="12" v-for="(feature, index) in features1" :key="index">
            <el-card :body-style="{ padding: '20px' }" class="feature-card">
              <div class="feature__icon">
                <img :src="require('@/assets/icon/' + feature.icon)" alt="Icon" class="feature-icon" />
              </div>
              <div class="feature__body">
                <h3 class="feature__title">{{ feature.title }}</h3>
                <p class="feature__desc">{{ feature.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" ></el-progress>
        <el-row :gutter="20" class="feature-row">
          <el-col :span="12" v-for="(feature, index) in features2" :key="index">
            <el-card :body-style="{ padding: '20px' }" class="feature-card">
              <div class="feature__icon">
                <img :src="require('@/assets/icon/' + feature.icon)" alt="Icon" class="feature-icon" />
              </div>
              <div class="feature__body">
                <h3 class="feature__title">{{ feature.title }}</h3>
                <p class="feature__desc">{{ feature.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "NewsCard",
  data() {
    return {
      features1: [
        {
          title: "智能停车场管理",
          description: "通过智能化系统实时监控和管理停车场，提高空间利用率，减少车辆拥堵，提升停车效率。",
          icon: "parking1.png"
        },
        {
          title: "车辆停车管理",
          description: "自动记录每辆车的停车时间和停车位置，提供便捷的查询和数据统计服务，自动化执行停车规则。",
          icon: "car0.png"
        },
      ],
      features2: [
        {
          title: "用户及支付管理",
          description: "支持多种支付方式，详细记录每一次支付交易，并提供电子发票服务，方便用户查询和管理。",
          icon: "user0.png"
        },
        {
          title: "设备及引导管理",
          description: "实时监控停车场内的各种设备状态，实时监控车位使用情况，智能引导系统快速找到空余车位。",
          icon: "car1.png"
        }
      ]
    };
  }
};
</script>

<style scoped>
.feature-row{
  margin: 20px;
  display: inline;
}
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  /* 鼠标悬停时卡片向上移动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果，增加立体感 */
}

.feature__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.feature-icon {
  max-width: 100px;
  max-height: 100px;
}

.feature__title {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.feature__desc {
  text-align: center;
  font-size: 1em;
  margin-bottom: 20px;
}

.feature__actions {
  text-align: center;
}

.feature__actions .el-button {
  width: 100%;
}
</style>